<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Fooding 商家注册</title>
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<link rel="icon" href="images/3.ico">
<link rel="stylesheet" href="css/style1.css">
    <script type="text/javascript">
$(function(){

	$("input[type=file]").change(function(){
		$(this).parents(".uploader").find(".filename").val($(this).val());
	});
	
	$("input[type=file]").each(function(){
		if($(this).val()==""){
			$(this).parents(".uploader").find(".filename").val("请选择文件...");
		}
	});
	
});
</script>
</head>
<body>
	<div class="wrapper-regist">
		<div class="main" style="top:3%;">
			<div class="registmain">
                <form class="first" action="storeApply" method="post"
				enctype="multipart/form-data">
				<div class="regist_first">
                    <p><label class="storename">店铺名称</label>
                    <input type="text" class="storename_text" name="shopName" ><br></p>
                    <p><label class="email">&nbsp;&nbsp;&nbsp;&nbsp;邮箱</label>
                        <input type="text" class="email_text" name="email"><br></p>
					<p><label class="storetype">店铺类型</label>
				    	<span><select class="storetype" name="type">
							<option value="中餐">中餐类</option>
							<option value="西餐">西餐类</option>
							<option value="小吃/零食">小吃/零食</option>
							<option value="甜品/饮品">甜品/饮品</option>
							<option value="水果/蔬菜">水果/蔬菜</option>
							<option value="鲜花/蛋糕">鲜花/蛋糕</option>
					      </select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;
                        </span>
                    </p>
					<p><label>是否配送</label>
                        <span>
                        <input class="radio" type="radio"name="distribution" value="1" checked="checked" />是 
                        <input class="radio" type="radio" name="distribution" value="0" />否
                        </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;
                    </p><br>
					<p><label class="storeadress">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所在省市</label>
					<span class="clsInit">
						<select id="selF" name="province"><option>请选择</option></select>省&nbsp;
                        <select id="selT" name="city"><option>请选择</option></select> 市&nbsp;
                        <select id="selC" name="town"><option>请选择</option></select>区(县)
                    </span>
                     </p>
                      <p><label class="addressdetail">详细地址</label>  
                          <input type="text" class="adddetail" name="detailAddress">
				      </p>
                        
					<p class="step">
                        <input id="first_back" type="button" value="上一步" /> 
                        <input id="first_next" type="button" value="下一步" />
					</p>
				</div>
				<div id="second">
					<div id="mysecond">
                        <p>
                            <label class="sellerame">商家姓名</label>
                            <input type="text" class="sellername_text"
							name="sellerName">
                        </p>
                        <p>
                            <label class="phone">&nbsp;&nbsp;&nbsp;&nbsp;手机</label>
                            <input type="text" class="email_text" name="mobile">
                        </p>
                        <p>
                            <label class="passwd">&nbsp;&nbsp;&nbsp;&nbsp;密码</label>
                            <input type="password" class="passwd_text" name="passwd">
                        </p>
                        <p>
                            <label class="passwd"></label>
                        </p>
                        <p>
                            <label class="idcard">身份证号</label>
                            <input type="text" class="email_text" name="idCard">
                        </p>
                        <div class="card-first">
                            <label class="obverseCardPhoto">身份证正面照</label>
                            <input id="obverseCard" type="file" name="obverseCardPhoto" 
                                   onchange="javascript:setCardFirst();"/>
<!--
                              <div id="cardfirst" style="position: relative;float:right;right:20%;padding-left:0px;">
                                  <img id="cardfirst-preview" width=-1 height=-1 style="diplay:none" />
                             </div>
-->
                        </div><br>
<!--                        <script src="js/img-upload.js" type="text/javascript"></script>-->
                        <div class="card-second">
                                <label class="reverseCardPhoto">身份证反面照</label>
                                <input class="reverseCard" type="file" name="reverseCardPhoto"/>
                        </div>
                        <p class="step">
                            <input id="second_back" type="button" value="上一步" /> 
                            <input id="second_next" type="button" value="下一步" />
                        </p>
				</div>
            </div>
				<div id="third">
					<p class="shopPhoto">
					    <label class="shopfrontPhoto">&nbsp;&nbsp;&nbsp;&nbsp;店铺照片</label>
                        <input type="file" name="shopfrontPhoto" />
					</p><br>
                    <p class="shopPhoto">
					    <label class="shopinsidePhoto">店铺内部照片</label>
                        <input type="file" name="shopinsidePhoto" />
					</p><br>
                    <p class="license">
					    <label class="businessLicense">&nbsp;&nbsp;&nbsp;&nbsp;营业执照</label>
                        <input type="file" name="businessLicense" />
					</p><br>
                    <p class="license">
					    <label class="cateringServiceLicense">&nbsp;&nbsp;餐饮许可证</label>
                        <input type="file" name="cateringServiceLicense" />
					</p><br>
					<p class="step">
                        <input id="third_back" type="button" value="上一步" /> 
                        <input id="submit" type="submit" value="提  交" />
                    </p>
				</div>
			</form>
            </div>
		</div>
		<div class="footer">
			<div class="footer-content">
				<div class="zixun foo">
					<p>
					<h3 class="footer-zixun">商家咨询</h3>
					</p>
					<p>002-12345678</p>
				</div>
				<div class="commpany foo">
					<p>
					<h3 class="footer-commpany">相关平台</h3>
					</p>
					<p>
						<a href="#">买家平台</a>
					</p>
					<p>
						<a href="#">后台管理</a>
					</p>
				</div>
				<div class="us foo">
					<p>
					<h3 class="footer-us">关于我们</h3>
					</p>
					<p>团队介绍</p>
				</div>
			</div>
			<div class="banquan">
				<p class="footer-banquan">&copy;2016 muxiaocao.cn &nbsp;&nbsp;
					|&nbsp;&nbsp; 技术支持：木蔷薇</p>
			</div>

		</div>
	</div>
<script>
    
       $(function(){
        function objInit(obj){
            return $(obj).html('<option>请选择</option>');
        }
        var arrData={
            山东省:{泰安市:'新泰市,莱芜市',
                    济宁市:'邹城,兖州'},
            四川省:{成都市:'武侯区,青羊区',
                    南充市:'南充，郊区'},
            江苏省:{南京市:'鼓楼区,玄武湖',
                    南通市:'通州湾,三余镇'}
        };
        $.each(arrData,function(pF){
            $('#selF').append('<option>'+pF+'</option>');
        });
        $('#selF').change(function(){
            objInit('#selT');
            objInit('#selC');
            $.each(arrData,function(pF,pS){
                if($('#selF option:selected').text()==pF){
                    $.each(pS,function(pT,pC){
                        $('#selT').append('<option>'+pT+'</option>');
                    });
                    $('#selT').change(function(){
                        objInit('#selC');
                        $.each(pS,function(pT,pC){
                            if($('#selT option:selected').text()==pT){
                                $.each(pC.split(","),function(){
                                    $('#selC').append('<option>'+this+'</option>');
                                })
                            }
                        })
                        
                    });
                }
            })
        });
    });
        
        $("#third").hide();
        $("#mysecond").hide();
        $("#first_next").on("click",function(){
            $(".regist_first").hide();
            $("#mysecond").show();
        });
        $("#second_next").on("click",function(){
            $(".regist_first").hide();
            $("#mysecond").hide();
            $("#third").show();
        });
        $("#second_back").on("click",function(){
            $(".regist_first").show();
            $("#mysecond").hide();
            $("#third").hide();
        });
        $("#third_back").on("click",function(){
            $(".regist_first").hide();
            $("#mysecond").show();
            $("#third").hide();
        });
        
    </script>
</body>
</html>
